<template>
  <div style="z-index: 1">
    <el-table :data="dataLsit?dataLsit:''" style="width: 100%" stripe :table-layout="tableLayout" highlight-current-row>
      <el-table-column type="index" width="100"/>
      <el-table-column label="下载" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center;cursor: pointer">
            <icon-to-bottom/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题" width="400"/>
      <el-table-column prop="ar[0].name" label="歌手" width="200 "/>
      <el-table-column prop="al.name" label="专辑"/>
      <el-table-column prop="address" label="时长" :formatter='transTime'/>
    </el-table>
    <div style="height: 140px"></div>
  </div>

</template>

<script setup>
import {ref, watch, nextTick} from 'vue'

const tableLayout = 'fixed'
const props = defineProps(['dataList'])
const dataLsit = ref([])
watch(() => props.dataList, (nwevalue, oldValue) => {
  dataLsit.value = nwevalue
})
// function dateFormat(row, column){
//   let date = row.dt;
//   return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
// },

// 秒转换分钟00:00:00格式
// function dateFormat(row, column) {
//   let t = row.dt;
//   if (times > -1) {
//     var hour = Math.floor(times / 3600);
//     var min = Math.floor(times / 60) % 60;
//     var sec = times % 60;
//     if (hour < 10) {
//       t = '0' + hour + ":";
//     } else {
//       t = hour + ":";
//     }
//
//     if (min < 10) {
//       t += "0";
//     }
//     t += min + ":";
//     if (sec < 10) {
//       t += "0";
//     }
//     t += sec.toFixed(2);
//   }
//   t = t.substring(0, t.length - 3);
//   return t;
// }
function transTime(row, column) {
  let time = row.dt;
  let duration = parseInt(time);
  let minute = parseInt(duration / 60);
  let sec = duration % 60 + '';
  let isM0 = ':';
  if (minute == 0) {
    minute = '00';
  } else if (minute < 10) {
    minute = '0' + minute;
  }
  if (sec.length == 1) {
    sec = '0' + sec;
  }
  return minute + isM0 + sec
}


const onContextMenu = () => {
  console.log('right click')
}
</script>

<style scoped>
:deep(.el-table__row--striped) {
  z-index: 1;
}
</style>